<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
        列表渲染    v-for  需要循环谁  就将该指令写在那个标签中
-->
<div id="app">

        <p v-for="name in names">{{name}}</p>
    <hr>
        <p v-for="(name ,index) in names">{{index}}--{{name}}</p>
    <hr>
    <ul>
        <li v-for="(item ,property) in user">{{property}}--{{item}}</li>
    </ul>



    <table border="1px" cellspacing="0" width="100%" >
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody id="table-data">
            <tr v-for="usr in users">
                <td v-for="val in usr">{{val}}</td>
            </tr>
        </tbody>

    </table>
</div>

<script >

    let vm = new Vue({
        el:'#app',
        data:{
            names:["tom","jack","小明"],
            user: {
                id:1,
                username:"tom",
                sex:'男',
                age:20
            },
            users:[
                {
                    id:1,
                    username:"tom",
                    sex:'男',
                    age:20
                },
                {
                    id:2,
                    username:"tom2",
                    sex:'男',
                    age:20
                }
            ]
        },
        methods:{}
      })

</script>

</body>
</html>